<template>
  <div class="page flex flex-col gap-y-3 p-3 h-dvh">
    <n-card :bordered="false">
      <n-form label-align="left" label-placement="left" label-width="auto" ref="formRef" :inline="true" :model="formParams" :show-feedback="false">
        <n-grid responsive="screen" cols="1 s:1 m:2 l:3 xl:4 2xl:4" :collapsed="isCollapse" :x-gap="16" :y-gap="16">
          <n-form-item-gi label="关键词"> <n-input v-model:value="formParams.keyword" placeholder="请输入关键词" /> </n-form-item-gi>
          <n-gi :suffix="true">
            <n-space align="center" justify="end">
              <n-button
                v-if="hasPermission('bmpch:route:search', '查询路由管理列表')"
                type="primary"
                :loading="searchBtnLoading"
                @click="handleSearch"
              >
                <template #icon>
                  <n-icon>
                    <SearchOutlined />
                  </n-icon>
                </template>
                查询
              </n-button>
              <n-button @click="() => (formParams = new FormParams())">重置</n-button>
              <n-button type="primary" icon-placement="right" text @click="() => (isCollapse = !isCollapse)">
                <template #icon>
                  <n-icon size="14" v-if="isCollapse">
                    <DownOutlined />
                  </n-icon>
                  <n-icon size="14" v-else>
                    <UpOutlined />
                  </n-icon>
                </template>
                {{ isCollapse ? '展开' : '收起' }}
              </n-button>
            </n-space>
          </n-gi>
        </n-grid>
      </n-form>
    </n-card>
    <n-card :bordered="false" class="flex-1">
      <DataTable
        remote
        striped
        :row-key="(row: BMPCH.RouteQry001Output_RouteDto) => row.routeId"
        :columns="tableColumns"
        :data="dataList"
        :loading="dataLoading"
        :scroll-x="2600"
        @reload="loadData"
      >
        <template #title>
          <n-space align="center">
            <n-button v-if="hasPermission('bmpch:route:add', '新建路由')" type="primary" @click="() => handleAdd()">
              <template #icon>
                <n-icon>
                  <PlusOutlined />
                </n-icon>
              </template>
              新建
            </n-button>
            <n-button v-if="hasPermission('bmpch:route:scan', '扫描路由')" @click="() => handleScan()">
              <template #icon>
                <n-icon>
                  <ScanOutlined />
                </n-icon>
              </template>
              扫描
            </n-button>
          </n-space>
        </template>
      </DataTable>
      <Edit v-model:show="showModal" :biz-id="bizId" :route-pid="routePid" @refresh="loadData" />
      <Scan v-model:show="showScanModal" @refresh="loadData" />
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, onMounted } from 'vue';
import { NSpace, NIcon, NButton, NPopconfirm } from 'naive-ui';
import type { DataTableColumns, FormInst } from 'naive-ui';
import { removeEmptyField } from '@yanfan/common/utils';
import DataTable from '@/components/DataTable';
import { routeQry001, routeRmv } from '@yanfan/bmpch-tsapi/route';
import type * as BMPCH from '@yanfan/bmpch-tsapi/types';
import { DownOutlined, UpOutlined, SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, ScanOutlined } from '@vicons/antd';
import { usePermission } from '@yanfan/common/hooks';
import Edit from './Edit.vue';
import Scan from './Scan.vue';

defineOptions({
  name: 'BmpchRouteList',
  titl: '路由管理列表',
});

const { hasPermission } = usePermission();

class FormParams {
  keyword: string | null = null;
}

const tableColumns: DataTableColumns<BMPCH.RouteQry001Output_RouteDto> = [
  { title: '路由名称', key: 'routeNm', width: 300, ellipsis: { tooltip: true } },
  { title: '标题', key: 'titl', width: 200, ellipsis: { tooltip: true } },
  { title: '地址', key: 'path', width: 200, ellipsis: { tooltip: true } },
  { title: '组件', key: 'compntPath', width: 300, ellipsis: { tooltip: true } },
  { title: '排序', key: 'ordrNum', width: 60 },
  { title: '缓存', key: 'cacheFlg', width: 60 },
  { title: '标签页', key: 'tabFlg', width: 70 },
  { title: '面包屑', key: 'brdcmbFlg', width: 70 },
  { title: '重定向', key: 'rdctPath', width: 300, ellipsis: { tooltip: true } },
  { title: '扩展', key: 'meta', width: 300, ellipsis: { tooltip: true } },
  { title: '备注', key: 'rmrk' },
  {
    title: '操作',
    key: 'actions',
    width: 210,
    align: 'center',
    fixed: 'right',
    render(row) {
      return h(NSpace, { align: 'center', justify: 'center' }, () => [
        h(
          NButton,
          { type: 'info', text: true, onClick: () => handleAdd(row) },
          { icon: () => h(NIcon, { size: 18 }, () => h(PlusOutlined)), default: () => '添加' },
        ),
        h(
          NButton,
          { type: 'info', text: true, onClick: () => handleEdit(row) },
          { icon: () => h(NIcon, { size: 18 }, () => h(EditOutlined)), default: () => '编辑' },
        ),
        h(
          NPopconfirm,
          { onPositiveClick: () => handleDelete(row) },
          {
            trigger: () =>
              h(NButton, { type: 'error', text: true }, { icon: () => h(NIcon, { size: 18 }, () => h(DeleteOutlined)), default: () => '删除' }),
            default: () => '确定要删除该数据吗？',
          },
        ),
      ]);
    },
  },
];

const showModal = ref(false);
const showScanModal = ref(false);
const isCollapse = ref(false);
const formRef = ref<FormInst | null>(null);
const formParams = ref(new FormParams());
const searchBtnLoading = ref(false);
const bizId = ref<string | null>(null);
const routePid = ref<string | null>(null);
const dataLoading = ref(false);
const dataList = ref<BMPCH.RouteQry001Output_RouteDto[]>([]);

onMounted(() => {
  loadData();
});

function loadData() {
  formRef.value?.validate((errors) => {
    if (!errors) {
      dataLoading.value = true;
      routeQry001({ ...removeEmptyField(formParams.value) })
        .then((data) => {
          dataList.value = data.list;
        })
        .finally(() => {
          dataLoading.value = false;
          searchBtnLoading.value = false;
        });
    } else {
      searchBtnLoading.value = false;
    }
  });
}

function handleSearch() {
  searchBtnLoading.value = true;
  loadData();
}

function handleAdd(row?: BMPCH.RouteQry001Output_RouteDto) {
  if (row) {
    routePid.value = row.routeId;
  } else {
    routePid.value = 'ROOT';
  }
  bizId.value = String();
  showModal.value = true;
}

function handleEdit(row: BMPCH.RouteQry001Output_RouteDto) {
  bizId.value = row.routeId;
  showModal.value = true;
}

function handleDelete(row: BMPCH.RouteQry001Output_RouteDto) {
  routeRmv({ routeId: row.routeId }).then(() => {
    window.$message.success('删除成功');
    loadData();
  });
}

function handleScan() {
  showScanModal.value = true;
}
</script>

<style lang="scss" scoped></style>
